<template>
  <div>
    <h1>{{ title }}</h1>
    <nuxt-link to="about">About</nuxt-link>
    <ul>
      <li v-for="item in posts" :key="item.id">
        <nuxt-link :to="'/article/' + item.id">{{ item.title }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HomePage',
  // 当你想要动态页面内容有利于SEO 或者式提升首屏渲染速度时， 就在 asyncData中发请求拿数据
  async asyncData () {
    // console.log('asyncdata');
    const res = await axios({
      method: 'GET',
      // 服务端请求客户端数据  需要将地址写完整
      url: 'http://localhost:3000/data.json'
    })
    return res.data
  },
  // 如果是非异步数据或者普通数据，则正常的初始化到data中即可
  data () {
    return {
      foo: 'bar'
    }
  }
}
</script>

<style>

</style>